<template>
  <div>
    <Card>
      <template #before>
        <el-button type="primary" @click="isShowDialogFn">添加客户</el-button>
      </template>
      <template #after>
        <el-select v-model="formData.agent" size="small">
          <el-option v-for="item in agentsList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <!-- <el-dropdown>
          <el-button type="plain" size="small">
            全部经纪<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in agentsList" :key="item.id">{{ item.name }} </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <el-input v-model="formData.name_contains" size="small" placeholder="请输入关键字" suffix-icon="el-icon-tickets">
          <el-button slot="append" size="small" class="search-btn" @click="searchTitle">筛选</el-button>
          <el-button slot="append" size="small" @click="resetSearch">重置</el-button>
        </el-input>
      </template>
    </Card>
    <el-card>
      <el-table :data="ClientsList" border>
        <el-table-column label="图片" prop="image">
          <template #default="{row}">
            <img :src="row.image" alt="" style="height:100px">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="微信" prop="wechat" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button size="small" type="primary" @click="editClients(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delClients(row.id)">删除</el-button>
          </template></el-table-column>
      </el-table>
    </el-card>
    <client-edit ref="clientsData" :is-show-dialog.sync="isShowDialog" :agents-list="agentsList" @addClients="addClientsFn" />
    <div class="page-bar">
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getClientsList, delClients, getAgentsList, getClientsCount } from '@/api/clients'
import clientEdit from './components/client-edit.vue'
export default {
  components: { clientEdit },
  data() {
    return {
      formData: {
        _limit: 5, // 获取多少条
        _start: 0, // 从第几条开始
        name_contains: '', // 模糊搜索
        agent: null
      },

      page: {
        currentPage: 1,
        total: 0,
        pageSize: 5
      },
      // 获取客户数量请求参数
      clientTotalQueryParams: {
        name_contains: '',
        agent: null
      },
      ClientsList: [],
      isShowDialog: false,
      agentsList: []
    }
  },
  async created() {
    await this.getClientsList()
    this.agentsList = await getAgentsList()
    this.page.total = await getClientsCount()
  },
  methods: {
    handleSizeChange(val) {
      this.formData._limit = val
      this.getClientsList(this.formData)
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.formData._start = (this.page.currentPage - 1) * this.page.pageSize
      this.getClientsList(this.formData)
    },
    async resetSearch() {
      this.formData.name_contains = ''
      this.formData._start = 0
      this.formData.agent = null
      this.page.currentPage = 1
      this.clientTotalQueryParams.name_contains = ''
      this.clientTotalQueryParams.agent = null
      this.page.total = await getClientsCount(this.clientTotalQueryParams)
      this.ClientsList = await getClientsList(this.formData)
    },
    editClients(id) {
      this.$refs.clientsData.editClients(id)
      this.isShowDialog = true
    },
    async addClientsFn() {
      this.page.total = await getClientsCount(this.clientTotalQueryParams)
      this.ClientsList = await getClientsList(this.formData)
    },
    isShowDialogFn() {
      this.isShowDialog = true
    },
    async delClients(id) {
      try {
        await this.$confirm('你确定要删除吗')
        await delClients(id)
        this.$message.success('删除成功')
        this.page.total = await getClientsCount(this.clientTotalQueryParams)
        // this.ClientsList = await getClientsList()
        this.handleCurrentChange(Math.ceil(this.page.total / this.page.pageSize))
      } catch (error) {
        console.log(error)
      }
    },
    async searchTitle() {
      this.clientTotalQueryParams = {
        name_contains: this.formData.name_contains,
        agent: this.formData.agent
      }
      this.page.total = await getClientsCount(this.clientTotalQueryParams)
      this.formData._start = 0
      this.page.currentPage = 1
      this.ClientsList = await getClientsList(this.formData)
    },
    async getClientsList() {
      this.ClientsList = await getClientsList(this.formData)
      // console.log(86, this.ClientsList)
    }
  }
}
</script>

<style scoped>
.el-input-group__append button.el-button:hover {
  color: #409eff;
}
.page-bar {
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>
